<template>
  <div id="mineMg-container">
    <manga-table-drawer @flashData="loadData" ref="mangaEditDrawer"/>
    <div v-if="!mgData || mgData.length <= 0" id="nodata-box"><h1>这里空空如也...</h1></div>
    <div v-if="mgData && mgData.length > 0" id="mg-container">
      <mg-list :mg-data="mgData"/>
    </div>
    <div id="config-button" @click="() => $refs.mangaEditDrawer.openWindow()">
      <span class="icon el-icon-s-tools"></span>
    </div>
  </div>
</template>

<script>
import {mineMangaPage} from "@/api/mgApi";
import mgList from '@/components/manga/mgList.vue'
import mangaTableDrawer from "@/components/manga/mangaTable.vue";
import bus from "@/bus/bus";

export default {
  name: "mineMg",
  components: {mangaTableDrawer, mgList},
  data() {
    return {
      loading: false,
      page: {
        page: 1,
        size: 10
      },
      pages: 0,
      mgData: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      mineMangaPage(this.page)
          .then(res => {
            this.mgData = res.data.records;
            this.pages = res.data.pages
          }).finally(() => {
            this.loading = false
      });
    },
    loadMoreData() {
      if (this.pages <= this.page.page || this.loading) {
        return;
      }
      this.page.page++
      this.loading = true
      mineMangaPage(this.page)
          .then(res => {
            // 追加
            this.mgData.push(...res.data.records);
          }).finally(() => {
        this.loading = false
      });
    }
  },
  created() {
    bus.$on('mineMgHitBottom', () => {
      this.loadMoreData()
    })
  },
  beforeDestroy() {
    bus.$off('mineMgHitBottom')
  }
}
</script>

<style scoped lang="scss">
@import url("@/scss/mineMg.scss");
</style>